<template>
  <div class="incordec">
    <div
      class="cart-decrease"
      v-show="food.count > 0"
      @click.prevent.stop="decreaseCount"
    >
      <img src="~assets/img/减.png" alt="" />
    </div>
    <div class="cart-count" v-show="food.count > 0">
      {{ food.count }}
    </div>
    <div class="cart-add" @click.prevent.stop="increaseCount">
      <img src="~assets/img/加.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Incordec",
  props: {
    food: {
      type: Object,
    },
  },
  data() {
    return {
      count:0,
    };
  },
  methods: {
    increaseCount() {
      if (!this.food.count) {
        this.$set(this.food, "count", 1);
      } else {
        this.food.count++;
      }
    },
    decreaseCount() {
      if (this.food.count <= 0) {
        this.$set(this.food, "count", 0);
      } else {
        this.food.count--;
      }
    },
  },
};
</script>

<style scoped>
.incordec > div {
  display: inline-block;
  vertical-align: middle;
}
.incordec .cart-decrease,
.incordec .cart-add {
  width: 20px;
  height: 20px;
}
.incordec img {
  width: 100%;
  height: 100%;
}
.incordec .cart-count {
  padding: 0 10px;
  color: rgb(100, 100, 100);
}
</style>